<template>
  <el-row v-if="val">
    <el-col :span="8">
      <el-select v-model="val.ValueType" placeholder="值类型" @change="val.Val = null">
        <el-option label="固定值" :value="0" />
        <el-option label="函数公式" :value="1" />
      <!-- <el-option label="环境参数" :value="2" /> -->
      </el-select>
    </el-col>
    <el-col :span="16">
      <el-input v-if="val.ValueType == 0" v-model="val.Val" placeholder="固定值" clearable @change="save" />
      <el-input v-else-if="val.ValueType == 1" v-model="val.Val" :readonly="true" placeholder="函数公式" clearable>
        <el-button slot="append" icon="el-icon-edit" @click="edit" />
      </el-input>
    </el-col>
    <filterFormulaEdit :formula="val.Val" :visible.sync="visible" @save="saveFormula" />
  </el-row>
</template>

<script>
import filterFormulaEdit from '../formula/filterFormulaEdit.vue'
export default {
  components: {
    filterFormulaEdit
  },
  props: {
    value: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      val: null
    }
  },
  watch: {
    value: {
      handler(val) {
        this.reset()
      },
      immediate: true,
      deep: false
    }
  },
  mounted() { },
  methods: {
    saveFormula(formula) {
      this.val.Val = formula
      this.save()
    },
    edit() {
      this.visible = true
    },
    save() {
      this.$emit('input', this.val)
      this.$emit('change', this.val)
    },
    reset() {
      if (this.value != null) {
        this.val = this.value
      } else {
        this.val = {
          Val: null,
          ValueType: 0
        }
      }
    }
  }
}
</script>
<style scoped></style>
